<template>
    <view class="content">
        <view class="top">
			<u-icon name="error-circle-fill" color="#01b6bc" size="34" class="u-m-r-10"></u-icon>
			<view>健康管理卡购买后可绑定受益人使用</view>
		</view>
		
		<view class="box">
			<image :src="data.image_uri" class="img"></image>
			<view class="right">
				<view class="name u-line-3">{{data.name}}</view>
				<view class="u-p-t-15 u-p-b-15 u-font-24">{{data.describe}}</view>
				<!-- 有优惠码时显示 优惠价格和原价 -->
				<view class="r-cen" v-if="timestamp > 0">
					<view class="price">
						￥<text>{{data.sale_price}}</text>
					</view>
					<view class="line-price">￥{{data.original_price}}</view>
				</view>
				<!-- 没有优惠码时 显示原价 -->
				<view class="r-cen" v-else>
					<view class="price">
						￥<text>{{data.original_price}}</text>
					</view>
				</view>
				
				<view class="number-box">
					<u-number-box v-model="num" input-width="70" :disabled-input="true"
					   :min="1" @change="valChange(index, $event)"></u-number-box>
				</view>
			</view>
		</view>
		
		<view class="box2">
			<view class="code">
				<view class="u-p-r-10">优惠码</view>
				<u-message-input mode="box" :value="code" :maxlength="6" width="60" :disabled-keyboard="disabled" 
					@finish="finish" @change="change"></u-message-input>
			</view>
			
			<view class="time u-p-t-16">{{tip}}</view>
			
			<view class="timestamp-box" v-if="timestamp">
				<view class="time u-p-r-25">优惠码有效期剩余</view>
				<u-count-down :timestamp="timestamp" :show-border="true" separator="zh"
					border-color="#ff8929" bg-color="#ff8929" color="#fff" 
					separator-color="#ff8929" separator-size="28"></u-count-down>
			</view>
		</view>
		
		<view class="text" v-if="rule&&rule.content">
			<u-parse :html="rule.content"></u-parse>
		</view>
		
		<view class="footer">
			<view class="f-tip">提示：此费用不含体检到院尾款 <br/>点击查看：<text @click="show = true">会员服务协议</text></view>
			<view class="f-down">
				<view class="u-flex">
					<view class="f-down-r">
						商品件数<text class="u-p-l-20">{{num}}件</text>
					</view>
					<!-- <view class="f-down-l">
						<view class="price">￥<text class="price-num">{{allMoney}}</text></view>
						<view>总计</view>
					</view> -->
				</view>
				<view class="f-btn" @click="$noMultipleClicks(doSubmit)">提交支付</view>
			</view>
		</view>
		
		<u-mask :show="show" mode="center" border-radius="30">
		    <view class="popup">
		        <view class="win-box3">
		            <view class="pop-up2">
		                <view class="pop-tit">{{content.title}}</view>
						<view>
							<scroll-view scroll-y="true" style="height:400rpx;">
								<view class="pop-text">
									<u-parse :html="content.content"></u-parse>
								</view>
							</scroll-view>
						</view>
		            </view>
		            <image src="/static/icon/close.png" class="pop-del" @click="show = false"></image>
		        </view>
		    </view>
		</u-mask>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				noClick:true,
				show: false,
				content: {},
				rule: {},
				data: {},
                num: 1,
				allMoney: 0,
				tip: '',
				code: '',
				disabled: false,
				timestamp: null,
            };
        },
        onLoad(option) {
			if (option.code) {
				this.code = option.code
				this.tip = '当前优惠码到期时间：' + option.tip
				this.num = option.num
				this.disabled = true
				this.checkCode()
			}
            this.getData()
			this.getContent()
			this.getContent13()
        },
		onHide() {
			this.timestamp = null
		},
        methods: {
			doSubmit() {
				this.$ajax('add_cards', {
				    userToken: this.$getSync('userToken'),
					coupon: this.code,//优惠码
					card_nums: this.num,//购卡数量
				}).then(ret => {
					if (ret.status == 0) {
						let data = {
							id: ret.data.pay_id,
							money: ret.data.pay_amount,
							token: this.$getSync('userToken'),
						}
				        this.$cTo(`/pages/pay/pay?data=${JSON.stringify(data)}`)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 从答题页进入时 带过来的优惠码
			checkCode() {
				this.$ajax('check_coupon', {
				    userToken: this.$getSync('userToken'),
					coupon: this.code,
				}).then(ret => {
					if (ret.status == 0) {
						this.timestamp = ret.data.end
					} else {
						this.tip = ret.message
					}
				});
			},
			
			change(e) {
				console.log('输入改变，当前值为：' + e);
				if (!e) {
					this.code = ''
					this.timestamp = null
				}
			},
			
			finish(e) {
				console.log('输入结束，当前值为：' + e);
				this.$ajax('check_coupon', {
				    userToken: this.$getSync('userToken'),
					coupon: e,
				}).then(ret => {
					if (ret.status == 0) {
				        this.code = e
						this.timestamp = ret.data.end
					} else {
						this.tip = ret.message
					}
				});
			},
			
            valChange(index, e) {
            	this.num = e.value;
				// this.allMoney = 0
				// this.allMoney = this.data.sale_price * this.num
            },
			
			getData() {
				this.$ajax('get_renew', {
			        userToken: this.$getSync('userToken'),
					type: 1,//1-新购 2-续费
			    }).then(ret => {
					if (ret.status == 0) {
			            this.data = ret.data
						// this.allMoney = this.data.sale_price * this.num
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getContent13() {
				this.$ajax('get_content', {
			        type: 13,
					//3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.rule = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getContent() {
				this.$ajax('get_content', {
			        type: 12,
					//3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.content = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	.popup {
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.win-box3 {
	    width: 616rpx;
	    background: #fff;
	    border-radius: 30rpx;
		position: relative;
	}
	.pop-up2{
		width: 616rpx;
		padding: 50rpx 40rpx;
	}
	.pop-tit{
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		padding-bottom: 30rpx;
	}
	.pop-text{
		font-size: 28rpx;
		overflow: hidden;
	}
	.pop-del {
	    width: 7vw;
	    height: 7vw;
	    position: absolute;
	    left: 38vw;
	    bottom: -100upx;
	}
	
	
    page{
        background: linear-gradient(to top,#f5f5f5,#f5f5f5,#f5f5f5,#c9f4f7);
    }
	.content{
		padding: 20rpx 20rpx 200rpx;
		min-height: 100vh;
	}
	.top{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 24rpx;
		padding: 16rpx 18rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	
	.box{
		padding: 34rpx 26rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.img{
		width: 178rpx;
		height: 178rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.right{
		flex: 1;
	}
	.name{
		font-size: 28rpx;
		font-weight: bold;
	}
	.r-cen{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// padding: 8rpx 0;
	}
	.price{
		font-size: 24rpx;
	}
	.price>text{
		font-size: 34rpx;
		font-weight: bold;
	}
	.line-price{
		padding-left: 25rpx;
		font-size: 24rpx;
		color: #898989;
		text-decoration: line-through;
	}
	.number-box{
		display: flex;
		justify-content: flex-end;
	}
	
	.box2{
		padding: 37rpx 0 35rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.code{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
	}
	.timestamp-box{
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 10rpx;
	}
	.time{
		font-size: 24rpx;
		color: #ff8929;
	}
	
	
	.text{
		font-size: 24rpx;
		color: #4f4f4f;
		padding-top: 20rpx;
	}
	
	.footer{
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
	}
	.f-tip{
		font-size: 24rpx;
		color: #fff;
		padding: 20rpx 28rpx;
		background-color: #626262;
	}
	.f-tip>text{
		text-decoration: underline;
	}
	.f-down{
		padding: 18rpx 28rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.f-down-l{
		font-size: 24rpx;
		color: #fe8928;
		padding-left: 50rpx;
	}
	.price{
		font-size: 28rpx;
	}
	.price-num{
		font-size: 40rpx;
		font-weight: bold;
	}
	.f-down-r{
		font-size: 24rpx;
		// color: #898989;
	}
	.line-price{
		text-decoration: line-through;
	}
	.f-btn{
		font-size: 30rpx;
		color: #fff;
		padding: 16rpx 40rpx;
		background-color: #01b6bc;
		border-radius: 50rpx;
	}
	

</style>
